<template>
  <div>
    <div class="banner">
      <div class="banner-title">GPU云服务器</div>
      <div class="banner-small">灵活的购买方式，简单便捷的操作，超强的计算能力，为您提供极致的服务体验</div>
      <div class="banner-btn"><a-button type="primary" class="buy-btn" @click="productBug">购买</a-button></div>
    </div>
    <div class="menu">
      <div class="menu-ul">
        <ul>
          <li
            v-for="(item, index) in typeList"
            :key="index"
            :class="{ liactive: typeIndex == index }"
            @click="changeTagIndex(index, item.value)"
          >
            {{ item.label }}
          </li>
        </ul>
      </div>
    </div>
    <div class="menu-detail">
      <div class="menu-detail-title">- GPU云服务器简介 -</div>
      <div class="menu-detail-small">
        GPU 云服务器是提供 GPU
        算力的弹性计算服务，具有超强的计算能力，服务于深度学习、科学计算、图形可视化、视频处理多种应用场景。
      </div>
    </div>
    <div class="feature">
      <div class="feature-title">- 功能特性 -</div>
      <div class="feature-small">GPU云服务器可以为您提供云存储，智能监控，远程操控，安全防护的功能</div>
    </div>
    <div class="feature-detail">
      <div class="feature-detail-inn">
        <div class="feature-detail-inn-exa">
          <img src="../../assets/image/product/cloudDetail/computing.png" alt="" />
          <div class="feature-detail-inn-exa-title">超强算力</div>
          <div class="feature-detail-inn-exa-small">
            可以将您的数据以及软件服务，安全的存储在信息高铁的GPU服务器上，使您随时随地都可以便捷的使用需要的服务
          </div>
          <div class="fix-bottom"></div>
        </div>
        <div class="feature-detail-inn-exa">
          <img src="../../assets/image/product/cloudDetail/buy.png" alt="" />
          <div class="feature-detail-inn-exa-title">灵活购买</div>
          <div class="feature-detail-inn-exa-small">
            采用更加灵活的付费方式，可以根据您的需求，进行按月或者按流量购买
          </div>
          <div class="fix-bottom"></div>
        </div>
        <div class="feature-detail-inn-exa">
          <img src="../../assets/image/product/cloudDetail/operation.png" alt="" />
          <div class="feature-detail-inn-exa-title">操作简单</div>
          <div class="feature-detail-inn-exa-small">
            简化GPU云服务器建立流程与控制流程，是用户能更简单，快捷的使用我们的服务
          </div>
          <div class="fix-bottom"></div>
        </div>
        <div class="feature-detail-inn-exa">
          <img src="../../assets/image/product/cloudDetail/safety.png" alt="" />
          <div class="feature-detail-inn-exa-title">安全防护</div>
          <div class="feature-detail-inn-exa-small">
            通过对入端口与出端口的监控，保障用户在GPU云服务器的数据以及隐私安全
          </div>
          <div class="fix-bottom"></div>
        </div>
      </div>
    </div>
    <div class="scenes"><div class="scenes-title">- 应用场景 -</div></div>
    <div class="scenes-detail">
      <div class="scenes-detail-work">
        <div class="scenes-detail-work-left">
          GPU云服务器适用于各种基于深度学习训练和推理应用场景，诸如图像、机器学习（神经网络）、NLP、语音识别，机器翻译，语音合成，文本朗读、检索等
        </div>
        <div class="scenes-detail-work-right">
          具有优秀浮点计算能力及独占显卡的GPU云服务，可加速应用计算性能提升5倍以上，大幅提升应用运行效率。已经广泛应用于分子动力学、基因测序、粒子碰撞实验以及化学、物理、工业仿真设计CAE等众多高性能计算领域服务
        </div>
      </div>
      <div class="scenes-img">
        <div>
          <img src="../../assets/image/product/cloudDetail/scenesOne.png" alt="" />
          <div class="hover-word">基因测序</div>
        </div>
        <div>
          <img src="../../assets/image/product/cloudDetail/scenesTwo.png" alt="" />
          <div class="hover-word">粒子碰撞试验</div>
        </div>
        <div>
          <img src="../../assets/image/product/cloudDetail/scenesThree.png" alt="" />
          <div class="hover-word">化学</div>
        </div>
        <div>
          <img src="../../assets/image/product/cloudDetail/scenesFour.png" alt="" />
          <div class="hover-word">工业仿真</div>
        </div>
      </div>
    </div>
    <div class="soft">
      <div class="soft-title">- 集成软件 -</div>
      <div class="soft-title-small">
        集成了TensorFlow，pyTorch，MXNet，Caffe等AI相关应用。帮助AI从业人员更快，更便捷的使用我们的软件
      </div>
    </div>
    <div class="soft-logo">
      <div class="soft-logo-inn">
        <img src="../../assets/image/product/cloudDetail/logo-one.png" alt="" />
        <img src="../../assets/image/product/cloudDetail/logo-two.png" alt="" />
        <img src="../../assets/image/product/cloudDetail/logo-three.png" alt="" />
        <img src="../../assets/image/product/cloudDetail/logo-four.png" alt="" />
      </div>
    </div>
    <div class="suggestion">
      <div class="suggestion-title">- 意见反馈 -</div>
      <div class="suggestion-inn">
        <div class="suggestion-inn-left">
          <p>
            用户通过小机器人浮窗进行吐槽或者反馈意见建议，可以得到对社区的贡献度，该贡献度可以用来兑换一定的算力豆，累计贡献度高的用户可以进入社区贡献排行榜获得更多奖励！
          </p>
          <p>
            您的真实意见会得到我们客服人员的即时反馈，对于优质的意见我们会给予一定的奖励，并且采纳入我们未来产品的迭代优化方向中！以做到产品研发团队与用户的步调一致，提供最贴合用户需求的服务。
          </p>
        </div>
        <div class="suggestion-inn-right">
          <p>
            为了更好地优化迭代产品，专门开设了小机器人浮窗反馈窗口，及时接受回复用户消息，尊重用户的真实想法，使用户成为信息高铁云建设不可或缺的一部分
          </p>
          <a-button type="primary" class="suggestion-btn">去圈子看看</a-button>
        </div>
      </div>
    </div>
    <div class="bill">
      <div class="bill-title">- 计费方式 -</div>
      <div class="bill-small">
        GPU云服务器主要提供包年包月计费与按流量计费两种，用户可根据自己的实际使用情况选择最适合的计费方式
      </div>
      <div class="bill-inn">
        <div class="bill-inn-left">
          <p>
            信息高铁云采用“算力豆”的方式进行结算。当用户想使用GPU云服务器算力或其它产品时都需要使用足够的算力豆来进行支付
          </p>
          <p>
            用户可以通过为社区做出贡献并用贡献值兑换算力豆，或者后台申请的方式来获得更多的算力豆以获得更多的GPU云服务器算力
          </p>
        </div>
        <div class="bill-inn-right">
          <div class="bill-inn-right-content">
            <img src="../../assets/image/product/cloudDetail/bill-one.png" alt="" />
            <div>
              <p class="bill-inn-right-title">包年包月</p>
              <p class="bill-inn-right-des">
                用户一次性支付所选时长的费用，价格相比按流量计费更优惠，对设备有长期稳定需求的客户可以使用这种计费方式
              </p>
            </div>
          </div>
          <div class="bill-inn-right-content">
            <img src="../../assets/image/product/cloudDetail/bill-two.png" alt="" />
            <div>
              <p class="bill-inn-right-title">按流量</p>
              <p class="bill-inn-right-des">
                依据用户的实际使用时长进行精确计费，时间精确到秒，适合使用方式灵活，需求不稳定的用户使用
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="document">
      <div class="document-title">- 产品文档 -</div>
      <p class="document-small">
        这里提供关于GPU云服务器的文档与资源。您可以从这里了解到建立云服务器的详细流程，以帮助您快速掌握，上手
      </p>
      <div class="document-inn">
        <div class="document-inn-content">
          <p class="document-inn-content-title">使用教程</p>
          <p class="document-inn-content-des">
            提供关于新建GPU云服务器，选择资源配置的使用教程，帮助您快速建立GPU云服务器
          </p>
          <a-button type="primary" class="document-btn">立即下载</a-button>
        </div>
        <div class="document-inn-content">
          <p class="document-inn-content-title">GPU云服务器说明文档</p>
          <p class="document-inn-content-des">
            提供关于GPU从介绍到进阶使用的指导，帮助您全面了解GPU云服务器的技术及使用
          </p>
          <a-button type="primary" class="document-btn">立即下载</a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CloudDetail',
  components: {},
  data() {
    return {
      typeList: [
        { label: '产品详情', value: 1 },
        { label: '特色服务', value: 2 },
        { label: '计费方式', value: 3 },
        { label: '产品文档', value: 4 }
      ],
      typeIndex: 0,
      productId: null,
      productName: null
    }
  },
  created() {
    this.productId = this.$route.query.productId
    this.productName = this.$route.query.productName
  },
  methods: {
    changeTagIndex(index, value) {
      console.log(value)
      this.typeIndex = index
      //setTimeout(this.getInfo(), 300)
    },
    productBug() {
      this.$router.push({
        path: '/product/cloud-server',
        query: { productId: this.productId, productName: this.productName }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.banner {
  background-image: url(../../assets/image/product/cloudDetail/banner.png);
  width: 100%;
  height: 280px;
  margin-top: 53px;
  overflow: hidden;
  .banner-title {
    color: #333;
    font-size: 34px;
    margin-top: 63px;
    margin-left: 15vw;
  }
  .banner-small {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
    margin-left: 15vw;
  }
  .banner-btn {
    margin-top: 22px;
    margin-left: 15vw;
    .buy-btn {
      width: 100px;
      height: 32px;
      background-color: #33b0ed;
      border-radius: 2px;
      color: #fff;
    }
  }
}
.menu {
  height: 54px;
  background-color: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  .menu-ul {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      li {
        float: left;
        color: #333;
        font-size: 16px;
        margin-right: 42px;
        height: 54px;
        line-height: 54px;
        width: 64px;
        &:hover {
          color: #33b0ed;
          border-bottom: solid 4px #33b0ed;
        }
      }
      .liactive {
        color: #33b0ed;
        border-bottom: solid 4px #33b0ed;
      }
    }
  }
}
.menu-detail {
  height: 204px;
  background-color: #f8fafd;
  padding-top: 70px;
  .menu-detail-title {
    width: 300px;
    margin: 0 auto;
    font-size: 32px;
    color: #282e3f;
    margin-bottom: 15px;
  }
  .menu-detail-small {
    width: 871px;
    color: #5c5c5c;
    font-size: 14px;
    margin: 0 auto;
  }
}
.feature {
  padding-top: 75px;
  height: 193px;
  background-color: #fff;
  .feature-title {
    width: 172px;
    margin: 0 auto;
    font-size: 32px;
    color: #282e3f;
    margin-bottom: 15px;
  }
  .feature-small {
    width: 464px;
    color: #5c5c5c;
    font-size: 14px;
    margin: 0 auto;
  }
}
.feature-detail {
  height: 464px;
  background-color: #f8fafd;
  width: 100%;
  padding-top: 50px;
  .feature-detail-inn {
    width: 1200px;
    height: 364px;
    margin: 0 auto;
    .feature-detail-inn-exa {
      width: 290px;
      height: 364px;
      background-color: #feffff;
      box-shadow: 2px 1px 18px -2px #e0ecff;
      border-radius: 4px;
      display: inline-block;
      overflow: hidden;
      &:not(:last-child) {
        margin-right: 13px;
      }
      img {
        width: 96px;
        height: 96px;
        margin: 60px 97px 18px 97px;
      }
      .feature-detail-inn-exa-title {
        width: 72px;
        font-size: 18px;
        color: #333;
        margin: 0 auto;
        height: 30px;
        margin-bottom: 40px;
      }
      .feature-detail-inn-exa-small {
        font-size: 12px;
        width: 242px;
        color: #5c5c5c;
        margin: 0 auto;
        height: 66px;
        line-height: 22px;
      }
      .fix-bottom {
        width: 100%;
        height: 8px;
        position: relative;
        bottom: -46px;
        background-color: #dfecfc;
        box-shadow: 2px 1px 18px -2px #e0ecff;
      }
    }
  }
}
.scenes {
  height: 161px;
  width: 100%;
  background-color: #ffffff;
  padding-top: 75px;
  .scenes-title {
    width: 172px;
    margin: 0 auto;
    font-size: 32px;
    color: #282e3f;
  }
}
.scenes-detail {
  height: 321px;
  background-color: #f8fafd;
  padding-top: 60px;
  .scenes-detail-work {
    width: 1120px;
    margin: 0 auto;
    font-size: 14px;
    color: #5c5c5c;
    display: flex;
    .scenes-detail-work-left {
      margin-right: 120px;
      width: 500px;
      line-height: 24px;
    }
    .scenes-detail-work-right {
      width: 500px;
      line-height: 24px;
    }
  }
  .scenes-img {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    padding-top: 60px;
    img {
      width: 290px;
      height: 290px;
      &:not(:last-child) {
        margin-right: 13px;
      }
    }
    .hover-word {
      width: 291px;
      height: 48px;
      background-color: rgba(0, 0, 0, 0.3);
      position: relative;
      bottom: 48px;
      padding-left: 24px;
      font-size: 22px;
      line-height: 48px;
      color: #fff;
    }
  }
}
.soft {
  background-color: #ffffff;
  padding-top: 226px;
  .soft-title {
    width: 172px;
    margin: 0 auto;
    font-size: 32px;
    color: #282e3f;
  }
  .soft-title-small {
    width: 680px;
    font-size: 14px;
    color: #5c5c5c;
    margin: 0 auto;
    padding-top: 18px;
    padding-bottom: 60px;
  }
}
.soft-logo {
  height: 170px;
  background-color: #f8fafd;
  .soft-logo-inn {
    width: 1200px;
    margin: 0 auto;
    padding-top: 40px;
    display: flex;
    img {
      width: 286px;
      height: 90px;
      &:not(:last-child) {
        margin-right: 19px;
      }
    }
  }
}
.suggestion {
  height: 435px;
  background-color: #fff;
  padding-top: 72px;
  .suggestion-title {
    width: 172px;
    margin: 0 auto;
    font-size: 32px;
    color: #282e3f;
  }
  .suggestion-inn {
    padding-top: 55px;
    margin: 0 auto;
    width: 1200px;
    display: flex;
    padding-bottom: 60px;
    .suggestion-inn-left {
      width: 630px;
      padding: 30px;
      font-size: 14px;
      color: #5c5c5c;
      height: 204px;
      background-color: #ffffff;
      border: solid 1px #e1e5ee;
      margin-right: 45px;
      line-height: 24px;
    }
    .suggestion-inn-right {
      width: 525px;
      height: 204px;
      p {
        margin-top: 48px;
        margin-bottom: 25px;
        line-height: 24px;
      }
      .suggestion-btn {
        width: 100px;
        height: 32px;
        background-color: #33b0ed;
        border-radius: 2px;
        border-radius: 2px;
        color: #fff;
      }
    }
  }
}
.bill {
  height: 485px;
  background-color: #f8fafd;
  padding-top: 60px;
  .bill-title {
    width: 172px;
    margin: 0 auto;
    font-size: 32px;
    color: #282e3f;
  }
  .bill-small {
    width: 690px;
    font-size: 14px;
    color: #5c5c5c;
    margin: 0 auto;
    padding-top: 12px;
  }
  .bill-inn {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    padding-top: 60px;
    .bill-inn-left {
      width: 590px;
      height: 252px;
      background-color: #ffffff;
      padding-left: 40px;
      padding-right: 40px;
      padding-top: 54px;
      p {
        line-height: 24px;
        font-size: 14px;
        color: #333;
        line-height: 24px;
        &:first-child {
          margin-bottom: 40px;
        }
      }
    }
    .bill-inn-right {
      margin-left: 10px;
      .bill-inn-right-content {
        width: 600px;
        height: 120px;
        background-color: #ffffff;
        display: flex;
        &:first-child {
          margin-bottom: 12px;
        }
        img {
          width: 60px;
          height: 60px;
          margin-left: 24px;
          margin-top: 30px;
          margin-right: 34px;
        }
        .bill-inn-right-title {
          color: #333;
          font-size: 16px;
          margin-top: 20px;
          margin-bottom: 12px;
        }
        .bill-inn-right-des {
          font-size: 12px;
          color: #5c5c5c;
          width: 456px;
          line-height: 20px;
        }
      }
    }
  }
}
.document {
  height: 463px;
  background-color: #fff;
  padding-top: 72px;
  .document-title {
    width: 172px;
    margin: 0 auto;
    font-size: 32px;
    color: #282e3f;
  }
  .document-small {
    width: 720px;
    font-size: 14px;
    color: #5c5c5c;
    margin: 0 auto;
    padding-top: 12px;
  }
  .document-inn {
    display: flex;
    margin-top: 60px;
    justify-content: center;
  }
  .document-inn-content {
    width: 594px;
    height: 200px;
    background-color: #ffffff;
    box-shadow: 0px 10px 20px 0px rgba(69, 158, 255, 0.1);
    border: solid 1px #f2f2f2;
    padding-left: 50px;
    padding-top: 30px;
    padding-right: 50px;
    &:first-child {
      margin-right: 12px;
    }
    .document-inn-content-title {
      color: #282e3f;
      font-size: 24px;
      margin-bottom: 20px;
    }
    .document-inn-content-des {
      color: #5c5c5c;
      font-size: 14px;
      margin-bottom: 15px;
      line-height: 24px;
    }
    .document-btn {
      width: 100px;
      height: 32px;
      background-color: #33b0ed;
      border-radius: 2px;
      color: #fff;
      font-size: 14px;
      margin-left: 392px;
    }
  }
}
</style>
